<script lang="ts" setup>
import { reactive, ref, } from 'vue';
import { useMessage } from '/@/hooks/web/useMessage';
import { getLogListReq, getAppListReq } from '/@/api/log';

const { createMessage } = useMessage();
const state = reactive({
  loading: false,
});
// search bar
const searchFormRef = ref();
const searchForm = reactive({
  dataRange: [],
  operator: '',
  appId: '',
  clientId: '',
});
const searchFormActions = {
  reset() {
    searchFormRef.value.resetFields();
    pgActions.reset();
    tableActions.getList();
  },
  ok() {
    tableActions.getList();
  }
}

const pg = reactive({
  current: 1,
  size: 10,
  total: 0
})
const pgActions = {
  reset() {
    pg.current = 1;
    pg.size = 10;
    pg.total = 0
  },
  currentChange(c) {
    pg.current = c;
    tableActions.getList();
  }
}

const appOptions = ref([]) as any;
const getAppListAction = async () => {
  const { data, respCode, } = await getAppListReq();
  if (respCode == 200) {
    appOptions.value = data.map(e => ({ label: e.clientName, value: e.clientId }))
  }
}
getAppListAction();


const table = reactive({
  data: [],
  selected: []
})
const tableActions = {
  async getList() {
    let params = {
      username: searchForm.operator,
      clientId: searchForm.appId,
      startIndex: pg.current,
      pageSize: pg.size,
      startTime: searchForm.dataRange ? searchForm.dataRange[0] : '',
      endTime: searchForm.dataRange ? searchForm.dataRange[1] : '',
    };
    state.loading = true;
    let { data, respCode, respMsg } = await getLogListReq(params);
    state.loading = false;
    data.data = [];
    if (respCode === 200) {
      table.data = data.list;
      pg.total = data.total;
      table.selected = [];
    } else {
      createMessage({
        message: respMsg,
        type: 'error'
      });
    }
  },
  selectionChange() {}
}
tableActions.getList()

function checkDetailsAction(p) {
  detailsModal.visible = true;
  detailsModal.data = p;
}

// details modal 
const detailsModal = reactive({
  visible: false,
  data: null as any,
});

</script>

<template>
  <div class="p-4 sys-log-management">
    <div class="searchBox mb-4 px-4 pt-4">
      <el-form :model="searchForm" ref="searchFormRef" inline :label-width="80">
        <el-form-item prop='appId' label="应用">
          <el-select filterable v-model="searchForm.appId">
            <el-option v-for="item in appOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop='operator' label="操作人">
          <el-input v-model="searchForm.operator" allow-clear />
        </el-form-item>
        <el-form-item prop='dataRange' label="时间范围" :label-col="{ style: { width: '90px' } }">
          <el-date-picker v-model="searchForm.dataRange" type="datetimerange" value-format="YYYY-MM-DD HH:mm:ss"
            start-placeholder="开始时间" end-placeholder="结束时间" />
        </el-form-item>
        <el-form-item>
          <el-button :loading="state.loading" type="primary" @click="searchFormActions.ok">查询</el-button>
          <el-button @click="searchFormActions.reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="middle-content p-4">
      <el-table class="mb-4" v-loading="state.loading"  :data="table.data" @selection-change="tableActions.selectionChange">
        <el-table-column type="selection" width="55" fixed ></el-table-column>
        <el-table-column prop="applicationName" label="应用名称" :width="220" fixed show-overflow-tooltip></el-table-column>
        <el-table-column prop="username" label="操作人" :width="90" show-overflow-tooltip></el-table-column>
        <el-table-column prop="operation" label="操作" :width="220" show-overflow-tooltip></el-table-column>
        <el-table-column prop="message" label="操作详情" :width="250" show-overflow-tooltip></el-table-column>
        <el-table-column prop="remoteIp" label="访问ip" :width="250" show-overflow-tooltip></el-table-column>
        <el-table-column prop="requestUri" label="请求url" :width="200" show-overflow-tooltip></el-table-column>
        <el-table-column prop="status" label="状态" :width="120">
          <template #default="scope">
            <span v-if='scope.row.status == 1' style="color:#2ed573">成功</span>
            <span v-else style="color: #ff4757">失败</span>
          </template>
        </el-table-column>
        <el-table-column prop="operationTime" label="操作时间" :width="220"></el-table-column>
        <el-table-column prop="operation" label="操作" :width="220" fixed="right">
          <template #default="scope">
            <el-button link type="primary" @click="checkDetailsAction(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination class="flex justify-end" background layout="prev, pager, next"
      :total="pg.total"
      :current-page="pg.current"
      :page-size="pg.size"
      @current-change="pgActions.currentChange"></el-pagination>
    </div>
    <el-dialog v-model="detailsModal.visible" title="详情" @close="detailsModal.visible = false;"
      :width="800">
      <div style="padding: 25px 40px 40px;">
        <el-row :gutter="10" class='pb-4'>
          <el-col :span="4" class='text-right'>应用名称：</el-col>
          <el-col :span="8">{{ detailsModal.data?.applicationName }}</el-col>
          <el-col :span="4" class='text-right'>操作人：</el-col>
          <el-col :span="8">{{ detailsModal.data?.username }}</el-col>
        </el-row>
        <el-row :gutter="10" class='pb-4'>
          <el-col :span="4" class='text-right'>操作：</el-col>
          <el-col :span="8">{{ detailsModal.data?.operation }}</el-col>
          <el-col :span="4" class='text-right'>操作详情：</el-col>
          <el-col :span="8">{{ detailsModal.data?.message }}</el-col>
        </el-row>
        <el-row :gutter="10" class='pb-4'>
          <el-col :span="4" class='text-right'>访问ip：</el-col>
          <el-col :span="8">{{ detailsModal.data?.remoteIp }}</el-col>
          <el-col :span="4" class='text-right'>请求url：</el-col>
          <el-col :span="8">{{ detailsModal.data?.requestUri }}</el-col>
        </el-row>
        <el-row :gutter="10" class='pb-4'>
          <el-col :span="4" class='text-right'>状态：</el-col>
          <el-col :span="8">{{ detailsModal.data?.status == 1 ? '成功' : '失败' }}</el-col>
          <el-col :span="4" class='text-right'>操作时间：</el-col>
          <el-col :span="8">{{ detailsModal.data?.operationTime }}</el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>

<style lang="less" scoped>
html[data-theme='light'] {
  .searchBox {
    background-color: #fff;
  }

  .middle-content {
    background-color: #fff;
  }
}

html[data-theme='dark'] {
  .searchBox {
    background-color: #000;
  }

  .middle-content {
    background-color: #000;
  }
}

.sys-log-management {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  .middle-content {
    flex:1;
  }
}
</style>